<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>BanchMark Result</title>
    <script src="../Chart.js/dist/Chart.min.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
<div style="width:95%;">
    <canvas id="canvas"></canvas>
</div>
<br>
<br>

<div style="display: none">
    <div id="data-set-template" style="border: #00FF00 1px solid; margin-top: 10px">
        <div>
            <label style="width: 60rem">
                标签：
            </label>
            <input type="text" placeholder="标签">
        </div>
        <div>
            <label style="width: 60rem">
                文件：
            </label>
            <input type="file">
        </div>
    </div>
</div>


<div>
    <button id="getDatas">Generate BanchMark</button>
</div>


<div>
    <button id="gotoHome">返回</button>
</div>

<script>
    window.chartColors = {
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(201, 203, 207)'
    };
    var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var config = {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: 'Benchmark Result'
            },
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: false
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Time'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Value'
                    }
                }]
            }
        }
    };

    window.onload = function () {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);

        var files = getQueryString("files");
        console.log("files = " + files);

        // 自动获取数据
        getDatas();
    };


    function addDataSets(datas, label, labels) {
        var colorNames = Object.keys(window.chartColors);
        var colorName = colorNames[config.data.datasets.length % colorNames.length];
        var newColor = window.chartColors[colorName];
        var newDataset = {
            label: label,
            backgroundColor: newColor,
            borderColor: newColor,
            data: [],
            fill: false
        };
        newDataset.data = datas;

        config.data.datasets.push(newDataset);
        config.data.labels = labels;

        window.myLine.update();
    }//MyDemo/feeds-perf-banchmark/feeds-heightcalculate-banchmark/banckmark.html


    // 获取数据
    document.getElementById('getDatas').addEventListener('click', function () {
        getDatas();
    });

    // 返回
    document.getElementById('gotoHome').addEventListener('click', function () {
        gotoHome();
    });


    // 请求数据方法
    function getDatas() {
        var URL = 'http://phplearningloc/MyDemo/feeds-perf-banchmark/common-banchmark-proj/feeds-perf-banckmark.php';
        // 初始化实例
        var request = new XMLHttpRequest();
        // 构造参数
        var sendData = {
            showapi_appid: '30603',
            showapi_sign: '98960666afeb4992ae91971d13494090',
            page: 1,
            num: '8'
        }

        var files = getQueryString("files");
        console.log("files = " + files);
        if (files) {
            sendData["files"] = files;
        }
        var objs = getQueryString("objs");
        console.log("objs = " + objs);
        if (objs) {
            sendData["objs"] = objs;
        }

        // 拼接参数构造URL
        URL = URL + composeQueryString(sendData);
        var encodeURL = encodeURI(URL);
        // 构造请求  请求类型 URL 是否异步 true异步 false同步
        request.open('GET', encodeURL, true);
        // 发送请求
        request.send(null);
        //设置异步回调
        request.onreadystatechange = function (ev) {

            switch (request.readyState) {
                case 0:
                    console.log(new Date() + ' : ' + '未初始化 - 还没有调用send方法');
                case 1:
                    console.log(new Date() + ' : ' + '正在发送请求' + 'time:');
                case 2:
                    console.log(new Date() + ' : ' + '已经接收到全部响应内容' + 'time:');
                case 4:
                    console.log(new Date() + ' : ' + '响应内容解析完成, 可以在客户端使用了' + 'time:');
            }

            //网络请求成功 打印数据
            if (request.readyState == 4 && request.status == 200) {
                // 打印json字符串
                // document.write(request.response);
                // json字符串转对象
                var responseObject = JSON.parse(request.response);

                var labelCount = 0;
                for (var i = 0; i < responseObject.length; i++) {
                    var obj = responseObject[i];
                    labelCount = Math.max(labelCount, obj.list.length);
                }
                var labels = new Array();
                for (var i = 0; i < labelCount; i++) {
                    labels[i] = i;
                }

                for (var i = 0; i < responseObject.length; i++) {
                    var obj = responseObject[i];
                    addDataSets(obj.list, obj.label, labels);
                }
                // 打印json对象
                console.log(responseObject);
            }
        }
    }

    function composeQueryString($query) {
        $queryString = "";
        $index = 0;
        for ($key in $query) {
            if ($index == 0) {
                $queryString += '?'
                $queryString += $key + '=' + $query[$key];
            } else {
                $queryString += '&' + $key + '=' + $query[$key];
            }
            $index ++;
        }
        return $queryString;
    }

    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            var queryString = decodeURI(r[2]);
            return queryString;
        }
        return null;
    }

    function gotoHome() {
        var destUrl = "http://phplearningloc/MyDemo/feeds-perf-banchmark/common-banchmark-proj/index.html";
        window.location.href=destUrl;
    }

</script>
</body>

</html>
